<template>
  <!-- 修改素材授权 -->
  <div class="change-auth" :style="{'zIndex': showDialog ? 200 : 2}">
    <div class="cell-wrapper">
      <div class="cell" @click="toggleDialog">
        <div class="label">授权方式</div>
        <div class="right">
          <span class="green-text">{{ type }}</span>
          <img src="@/assets/image/right-icon.png" alt="" class="right-icon"/>
        </div>
      </div>
      <div 
        class="material-list"
        v-if="type === '部分授权'"
      >
        <div class="item" v-for="(item, index) in list" :key="index">
          <p><span>{{ item.package_name }}—</span><span class="gray-text">{{ productTypeDict[item.topic]}}</span></p>
          <p @click="removeItem(item, index)">
            <span class="red-text">移出</span>
            <img src="@/assets/image/auth-del.png" alt="" class="del-icon">
          </p>
        </div>
       
        
        <div class="add-material" @click="chooseMaterialPack">+选择授权素材包</div>
      </div>
    </div>

    <van-popup v-model="showDialog"  position="bottom">
      <div class="popup-content">
        <div 
          class="line" @click="lineClick('全部授权')"
          :class="type == '全部授权' ? 'active': ''"
          >
          <span>全部授权</span>
          <img src="@/assets/image/popup-check.png" alt=""/>
        </div>
        <div 
          :class="type == '部分授权' ? 'active': ''"
          class="line" @click="lineClick('部分授权')">
          <span>部分授权</span>
          <img src="@/assets/image/popup-check.png" alt=""/>
        </div>
        <div 
          :class="type == '不授权' ? 'active': ''"
          class="line" @click="lineClick('不授权')">
          <span>不授权</span>
          <img src="@/assets/image/popup-check.png" alt=""/>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { listPackageByAccountId, deletePackageAuth, updateMaterialType, getUserInfo } from '@/api/account'
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      type: '',
      showDialog: false,
      list: [],
      typeDict: {
        'ALL_AUTHORIZE': '全部授权',
        'PART_AUTHORIZE': '部分授权',
        'NOT_AUTHORIZE': '不授权',
      },
      dictType: {
        '全部授权': 'ALL_AUTHORIZE',
        '部分授权': 'PART_AUTHORIZE',
        '不授权': 'NOT_AUTHORIZE',
      },
      productTypeDict: {
        'GOODS': '产品',
        'PEOPLE': '人物',
        'LOCATION': '场景'
      }
    }
  },
  computed: {
    ...mapGetters(['commonUrlPath'])
  },
  async mounted () {
    await this.getUserInfo()
    if (this.type === '部分授权') {
      this.getPackageList()
    }
    document.title = '素材包授权'
  },
  
  methods: {
    getUserInfo () {
      return new Promise((resolve, reject) => {
        getUserInfo({ account_id: this.$route.query.account_id}).then(res => {
          this.type = this.typeDict[res.authorize_type_enum]
          resolve()
        })
      })
    },
    removeItem (item, index) {
      if(this.list.length === 1) {
        Toast('最少保留一个')
        return
      }
      this.list.splice(index, 1)
      deletePackageAuth({
        account_id: this.$route.query.account_id,
        package_id: item.id
      }).then(res => {
        console.log('删除成功')
      })
    },
    getIds () {
      let arr = []
      this.list.forEach(item => {
        arr.push(item.id)
      })
      return arr
    },
    getPackageList () {
      return new Promise((resolve, reject) => {
        listPackageByAccountId({
          account_id: this.$route.query.account_id
        }).then(res => {
          console.log('已授权的素材包：', res)
          this.list = res
          resolve()
        })
      })
    },
    chooseMaterialPack () {
      this.$router.push({
        path: `${this.commonUrlPath}/chooseMaterialPack`,
        query: {
          account_id: this.$route.query.account_id
        }
      })
    },
    async lineClick (type) {
      this.type = type
      if (type === '全部授权' || type === '不授权') {
        updateMaterialType({
          account_id: this.$route.query.account_id,
          authorize_type_enum: this.dictType[type],

          status: 'AUDIT_PASS'
        }).then(res => {
          console.log('更新授权成功')
          Toast('修改成功')
          this.showDialog = false
        })
      } else {
        this.showDialog = false
        await this.getPackageList()
        updateMaterialType({
          account_id: this.$route.query.account_id,
          authorize_type_enum: this.dictType[type],
          package_ids: this.getIds(),
          status: 'AUDIT_PASS'
        }).then(res => {
          console.log('更新授权成功')
          Toast('修改成功')
          this.showDialog = false
        })
      }
      
    },
    toggleDialog () {
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.add-material {
  text-align: right;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #006EDD;
}
.red-text {
  margin-right: 0.8vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #D81E06;
}
.del-icon {
  width: 4vw;
  height: 4vw;
}
.gray-text {
  color: #999999;
}
.material-list {
  box-sizing: border-box;
  padding-top: 4.27vw;
  border-top: 0.32vw solid #E6E6E6;
  padding-bottom: 5.33vw;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 5.87vw;
  margin-bottom: 3.2vw;
  padding-left: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #666;
}
.item:last-of-type {
  margin-bottom: 5.33vw;
}
.item > p {
  display: flex;
  align-items: center;
}
.green-text {
  margin-right: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #00A6A7;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16vw;
  line-height: 16vw;
  box-sizing: border-box;
  padding-left: 8vw;
  padding-right: 9.33vw;
  font-family: Source Sans Pro;
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 7.47vw;
  color: #333333;
}
.line > img {
  display: none;
  width: 3.47vw;
  height: 2.13vw;
}
.line.active {
  background: #E6F2FF;
  color: #0A67FF;
}
.line.active > img {
  display: block;
}
::v-deep .van-overlay {
  background: rgba(0,0,0,0.3);
}
::v-deep .van-popup {
  border-radius: 10px 10px 0 0;
}
.popup-content {
  box-sizing: border-box;
  padding-top: 5.33vw;
  height: 65.87vw;
  width: 100vw;
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.right {
  display: flex;
  align-items: center;
}
.right-icon {
  width: 3vw;
  height: 3vw;
}
.cell-wrapper {
  width: 89.6vw;
  margin: 0 auto;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 2.13vw;
  padding: 0 5.33vw 0 3.2vw;
  box-sizing: border-box;
}
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 89.6vw;
  height: 16.53vw;
  padding: 0 5.33vw 0 3.2vw;
  box-sizing: border-box;
}
.change-auth {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 5.33vw;
  background: #fff;
}
.label {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #333333;
}
</style>